<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>操作员查询</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
  <style type="text/css">
	.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
	     top: 50%;
	     transform: translateY(-50%);
	}
  </style>
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
              <input type="text" name="loginname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
              <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
              <select name="status">
              	<option value="">请选择</option>
                <option value="在职" selected>在职</option>
                <option value="离职">离职</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-operator-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
       
        <table id="LAY-operator-content-list" lay-filter="LAY-operator-content-list"></table> 
        <script type="text/html" id="toolbarDemo">
  			<div class="layui-btn-container">
    			<button class="layui-btn layuiadmin-btn-list" lay-event="batchdel">批量删除</button>
    			<button class="layui-btn layuiadmin-btn-list" lay-event="add">添加</button>
  			</div>
		</script>
        <script type="text/html" id="table-content-list">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>
    </div>
  </div>

  <script src="../layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table', 'laydate'], function(){
    var table = layui.table
    ,admin = layui.admin
    ,laydate = layui.laydate
    ,form = layui.form;
    
    laydate.render({
		elem: '#date', //弹出页的指定元素生日时期需要为时间格式
	});
    
    table.render({
        elem: '#LAY-operator-content-list'
        ,url:'../operator/findListJson/'
        ,toolbar: '#toolbarDemo'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,toolbar: '#toolbarDemo'
        ,cols: [[
		   {type:'checkbox'}
		  ,{type:'numbers', title: '序号'}
          ,{field:'loginname', title: '用户名', sort: true}
          ,{field:'phone', title: '电话', sort: true}
          ,{field:'addtime', title: '添加时间', sort: true}
          ,{field:'status', title: '状态', sort: true}
          ,{field:'rolename', title: '所属权限', sort: true}
          ,{fixed: 'right', title:'操作', toolbar: '#table-content-list', width:150}
        ]]
    	,page: true
      });
    
    //监听搜索
    form.on('submit(LAY-operator-contlist-search)', function(data){
      var field = data.field;
      
      //执行重载
      table.reload('LAY-operator-content-list', {
        where: field
        ,page: {
            curr: 1 //重新从第 1 页开始
        }
      });
    });
    
    //监听表格事件
    table.on('tool(LAY-operator-content-list)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('确定删除 '+data.loginname + '?', function(index){
        	//关闭网页
        	layer.close(index);
        	admin.req({
        		url: '../operator/delete' //实际使用请改成服务端真实接口
       	        ,data: data
       	        ,done: function(res){
       	         	if(res.flag==1){
       	         		layer.msg('删除成功');
       			  	}else{
       			  		layer.msg('删除失败');
       			  	}
       	         	table.reload('LAY-operator-content-list');
       	         }
             });
        });
      } else if(obj.event === 'edit'){
    	  layer.open({
              type: 2
              ,title: '修改操作员'
              ,content: '../operator/updateInit?id='+data.id
              ,maxmin: true
              ,area: ['900px', '600px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-operator-form-submit");
                submit.click();
              }
	          ,end: function () {
	          	table.reload('LAY-operator-content-list');
	          }
            });
      }
    });
    
    //头工具栏事件
    table.on('toolbar(LAY-operator-content-list)', function(obj){
      
      switch(obj.event){
        case 'batchdel': //批量删除
        	var ids = [];//封装批量删除的ID
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            
            if(data.length === 0){
                return layer.msg('请选择数据');
            }
	        layer.confirm('确定批量删除选中项 ?', function(index){
	        	layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
	          	admin.req({
	          		    url: '../operator/deleteBatch' //实际使用请改成服务端真实接口
	         	        ,data: JSON.stringify(data)
	         	        ,type: 'POST'
	         	        ,contentType: "application/json;charset-UTF-8"
	         	        ,done: function(res){
	         	         	if(res.flag==1){
	         	         		layer.msg('删除成功');
	         			  	}else{
	         			  		layer.msg('删除失败');
	         			  	}
	         	         	//关闭网页
	        	          	layer.close(index);
	         	         	table.reload('LAY-operator-content-list');
	         	         }
	               });
	        });
        break;
        case 'add':  //添加
        	layer.open({
                type: 2
                ,title: '添加操作员'
                ,content: '../operator/addInit'
                ,maxmin: true
                ,area: ['900px', '600px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  //点击确认触发 iframe 内容中的按钮提交
                  var submit = layero.find('iframe').contents().find("#layuiadmin-operator-form-submit");
                  submit.click();
                }
	        	,end: function () {
	        		table.reload('LAY-operator-content-list');
	            }
              });
        break;
      };
    });
  });
 
  
  </script>
</body>
</html>